<template>
  <div id="app" class="all">
    <!-- 这里放a链接 -->
    <nav class="left">
      <!-- day40 -->
      <li @click="isShow" class="title">
        <router-link to="/products"
          >产品列表 <span class="color"> </span>
          <!-- {{ isShowText1 }}  -->
        </router-link>
      </li>
      <div>
        <li>
          <router-link to="/home">1.首页</router-link>
        </li>
        <!-- <li>
          <router-link to="/products">2.产品列表</router-link>
        </li> -->
        <!-- <li>
          <router-link to="/add">2.产品新增</router-link>
        </li> -->
        <!-- <li>
          <router-link to="/edit">3.编辑</router-link>
        </li> -->
      </div>
    </nav>

    <!-- 保存01Comp缓存 -->
    <!-- <keep-alive> -->
    <router-view class="right" v-show="isShowStudy" />
    <!-- </keep-alive> -->
    <!-- 
        目标：
          布局：(5)
          1.首页路由重定向:['/home']（5）
          2.路由跳转:['/home/product'](5)
            Vuex存数据[arr]（5）
            mutation:[pushArr]
                     [pushArr2]
                     [removeArr]
                     ['removeArr']
          3.界面数据渲染：(product.vue)(20)
            时间过滤器：格式化时间[changeTime]
            库计算属性：产品种类[num]，总价[total]
          4.新增：跳转路由['/add']（10）
                  添加数据到库[addArr]，库[pushArr]
                  跳转路由'/product']
          5.编辑：跳转路由['/edit'](15)
                  携带query参数,渲染数据，禁用id
                  更新数据，更新时间[keep];库['pushArr2']
                  跳转路由['/products']
          6.删除(5):[remove],库['removeArr']
          7.全选反选(10)：['inputAll']
          8.批量删除(10):['removes'],库['removeArr']
          9.关键字筛选(10):['inp']
          
          知识点：
                1.重定向：redirect
                2.路由跳转：this.$router.push('/path')
                            (state)
                3.数据渲染
                    时间过滤器：replaceAll('','')
                                filters:return
                                {{ a | b }}
                    (getters)
                4.新增
                    mutations:
                           keep(){
                             this.pushArr({})
                           }
                5.编辑
                     this.$router.push(
                       {
                         name:'/path'
                         query:{
                           id:item.id
                         }
                       }
                     )
                  this.$route.query.id
                更新数据:
                    v-model
                        keep(){
                          this.pushArr2({v-model})
                        }
                6.删除
                      splice
                7.全选
                      includes,reduce
                8.批量删除
                      splice,num--
                9.搜索
                      @input,includes,forEach,created:$set
     -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowText1: "隐藏",
      isShowStudy: true,
    };
  },
  methods: {
    isShow() {
      // this.isShowStudy = !this.isShowStudy;
      // this.isShowText1 = this.isShowStudy ? "隐藏" : "显示";
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
/*
    布局：用百分比布局(自适应尺寸)
    */
// 1.总容器
html,
body {
  height: 100%;
}
.all {
  // 总体内容100%
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    // 左侧展示内容20%
    width: 20%;
    height: 100%;
    background: #333;
    .title {
      background: #ccc;
    }

    li {
      list-style: none;
      width: 100%;
      height: 60px;
      line-height: 60px;
      // 设置文本不可选中
      user-select: none;
      text-align: center;

      &:hover {
        background-color: #ccc;
        // color: #df307c;
      }
    }

    .color {
      color: #df307c;
    }
    a {
      /* 取消下划线 */
      text-decoration: none;
      height: 100%;
      color: #fff;
    }
  }
}

.right {
  // 右侧展示内容79%
  font-size: 15px;
  width: 79%;
  height: 100%;

  .show {
    display: flex;
    justify-content: center;
  }
}
</style>
